<template>
	<view class="shopping_box">
		<view class="shopping_box_top">
			<view class="">30天无忧退货</view>
			<view class="">48小时快速退款</view>
			<view class="">30满88元免邮费</view>
		</view>
		<!-- 数据渲染 -->
		<view class="shopping" v-if="!isShoppingCart">
			<van-checkbox-group   v-model="result" >
				<block >
				<van-checkbox  v-for="(item, index) in cartList" :key="item.id"  name="item.id" bind:change="getCartChecked(item)"   > 
					<van-card :num="item.number" :price="item.price" :desc="item.specifications" :title="item.goodsName" :thumb="item.picUrl" />
				</van-checkbox>
				</block>
			</van-checkbox-group>
		</view>

		<!-- 未登录看不到数据 -->
		<view class="" v-else>
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			<view class="" style="width: 25%; margin: 0 auto; padding: 20px;"><u-button type="primary" text="请重新登录" @click="navigateTo"></u-button></view>
		</view>
	
		<view class="vansubmitbar" >
		<van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit" >
				
			<van-checkbox v-model="isAllCheck">全选</van-checkbox>
			
			<template #tip>
				累计<span>{{cartTotal.checkedGoodsCount}}</span>件商品,可点击
				<van-button :type="isShowStepper?'danger':'primary'" size="small"
				            @click="isShowStepper = !isShowStepper">
				    {{isShowStepper?'完成编辑':'编辑'}}
				</van-button>
				按钮进行商品数量修改
			</template>
		</van-submit-bar>
	
		</view>
		<!-- 全选编辑下单 -->
		<!-- 	<view class="u-tabbar-bottom">
			<u-row justify="space-between">
				<u-col span="1">
					<view class="demo-layout bg-purple">
						<u-checkbox-group><u-checkbox @change="allSelect" checked="true" shape="circle" size="25px" iconSize="20px"></u-checkbox></u-checkbox-group>
					</view>
				</u-col>
				<u-col span="2"><view class="demo-layout ">全选 ()</view></u-col>
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<view class=""><text>￥</text></view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple-light">
						<u-button type="primary" shape="circle" text="编辑" @click="getCartDelete"></u-button>
						<u-button type="primary" shape="circle" text="下单"></u-button>
					</view>
				</u-col>
			</u-row>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShoppingCart: true,
			isShowStepper:false,
			result: [],
			//isAllCheck: false,
			cartList: [] ,//购物车商品列表
			cartTotal:{}, //计算后的总量,价格等信息
		};
	},
	onLoad() {
		this.getCartIndex();
		//this.getCartDelete();
		this.getCartChecked();
	
	},

	computed:{
	isAllCheck(){
		
	        //当所有复选框被选中,数组的长度等于商品的长度
	        return this.result.length == this.cartList.length  ? true :false;
	
	    }
	
		
	},
	methods: {
		
		onSubmit(){
			
		},
		onClickEditAddress(){
			
		},
		
		//登录
		navigateTo() {
			uni.$u.route('/pages/center/login');
		},
		//购物车商品列表
		getCartIndex() {
			this.$get(this.API.cartIndex).then(res => {
				console.log('aaa',res)
				//购物车总数
				this.cartTotal=res.data.data.cartTotal
				this.cartList = res.data.data.cartList;
				//判断数组为空重新登录
				var me = this;
				if (me.cartList != '' && me.cartList != [] && me.cartList != {}) {
					me.isShoppingCart = false;
				} else {
					me.isShoppingCart = true;
				}
				
				  this.result = []
				this.cartList.map(item => {
				    if (item.checked==true) {
				        this.result.push(item.id)
				    }
				})
				console.log('不不不',this.result)
				// for (var i = 0; i < this.cartList.length; i++) {
				// 	// 添加checked属性并设置为false
				// 	this.$set(this.cartList[i], 'checked', false);
				// }
			
			});
		},
		//点击全选
		allSelect() {
			console.log(222);
		},

		//选择或取消选择商品
		getCartChecked(event) {
			console.log(event)
			// this.$post(this.API.cartChecked,{
			// 	productIds:item.productId.toString(),
			// 	isChecked:item.checked==true?false:true
			// }).then(res => {
			// 	console.log(res);
			// });
		},
		// //删除商品
		// getCartDelete() {
		// 	let arr = [];
		// 	for (let i = 0; i < this.cartList.length; i++) {
		// 		if (this.cartList[i].checked == true) {
		// 			arr.push(this.cartList[i].productId);
		// 		}
		// 	}
		// 	//console.log(arr);

		// 	this.$post(this.API.cartDelete, {
		// 		productIds: arr
		// 	}).then(res => {
		// 		//console.log(res);
		// 	});
		// }
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #eaeaea;
}

.shopping_box {
	height: 100vh;

	.shopping_box_top {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		font-size: 30rpx;
	}
	.shopping {
		padding: 10rpx 10rpx;
		/deep/.van-checkbox{
			border-bottom: 1px solid #C6C7CB;
		}
		/deep/ .van-checkbox__label {
			flex: 1;
			padding: 0.05rem;
			
		}
	}

	.van-submit-bar {
		padding: 0;
		height: 100rpx !important;
		text-align: center;
		font-weight: bold;
	}
	

	

	.van-card {
		background: white;
		
		
	}

	.delete-button {
		height: 100%;
	}
	.u-tabbar-bottom {
		position: fixed;
		bottom: 0;

		width: 100vw;
		height: 100rpx;
		/* #ifdef H5 */
		height: 200rpx;
		/* #endif */
		background-color: #ffffff;
		.bg-purple-light {
			display: flex;
			.u-button {
				margin: 10rpx;
			}
		}
	}
}
</style>
